<script lang="ts" setup>
  import { person, grabbles } from '@/api/table/about';
  import { ref, onMounted } from 'vue';
  import { usequanju } from '@/views/system/role/roleStore';

  const staff = ref<Array<any>>([]);
  let staffboolean = ref<boolean>(false);

  const use = usequanju();
  use.search();
  console.log(use.search());

  const persons = ref<Array<any>>([]);
  // const limit = 8,
  //   pages = ref(1),
  //   count = ref(0),
  //   max = ref(0);
  // const grabbles=ref<Promise<any>>()

  // const seacher = async () => {
  //   const person = await person({
  //     offset: (pages.value - 1) * limit,
  //     limit,
  //     count,
  //   });
  //   if (person) {
  //     persons.value = person.results;
  //     count.value = person.count;
  //     pages.value = person.page;
  //     const maxPage = Math.ceil(count.value / limit);
  //     max.value = maxPage;
  //     console.log(persons.value);
  //   }
  // };

  //获取所有员工信息
  onMounted(() => {
    person().then((result) => {
      persons.value = result;
    });
  });

  //搜索
  const val = ref('');
  const grabble = async () => {
    const data = val.value;
    if (data.length > 0) {
      const a = await grabbles({ query: data });
      staff.value = a;
      staffboolean.value = true;
    }
  };
  const data = val.value;
  grabbles(data);
</script>
<template>
  <KeepAlive>
    <div>
      <NInputGroup class="mb-10 mt-5">
        <NInput :style="{ width: '50%' }" type="text" v-model:value="val" />
        <NButton type="primary" ghost @click="grabble"> 搜索 </NButton>
      </NInputGroup>
      <NSpace vertical>
        <NTable striped>
          <thead>
            <tr>
              <th>人数</th>
              <th>员工姓名</th>
              <th>员工性别</th>
              <th>所属部门</th>
              <th>职务</th>
              <th>电话</th>
              <th>地址</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(person, index) in use.todos" :key="person.id">
              <td>{{ index + 1 }}</td>
              <td>{{ person.name }}</td>
              <td>{{ person.sex }}</td>
              <td>{{ person.org }}</td>
              <td>{{ person.duty }}</td>
              <td>{{ person.phone }}</td>
              <td>{{ person.address }}</td>
              <td>{{ person.description }}</td>
            </tr>
          </tbody>
        </NTable>
      </NSpace>
      <n-pagination
        v-model:page="use.page"
        :page-count="use.maxPage"
        class="text-center"
        :page-slot="5"
      />

      <template v-if="staffboolean">
        <NSpace vertical class="mb-20">
          <NTable striped>
            <thead>
              <tr>
                <th>查询结果</th>
                <th>员工姓名</th>
                <th>员工性别</th>
                <th>所属部门</th>
                <th>职务</th>
                <th>电话</th>
                <th>地址</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(data, index) in staff" :key="data.id">
                <td>{{ index + 1 }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.sex }}</td>
                <td>{{ data.org }}</td>
                <td>{{ data.duty }}</td>
                <td>{{ data.phone }}</td>
                <td>{{ data.address }}</td>
                <td>{{ data.description }}</td>
              </tr>
            </tbody>
          </NTable>
        </NSpace>
      </template>
    </div>
  </KeepAlive>
</template>

<!-- <script lang="ts" setup>
  export interface schemaItem {
    field: string;
    label: string;
  }

  const { pkg, lastBuildTime } = __APP_INFO__;
  const { dependencies, devDependencies, name, version } = pkg;

  const schema: schemaItem[] = [];
  const devSchema: schemaItem[] = [];

  Object.keys(dependencies).forEach((key) => {
    schema.push({ field: key, label: dependencies[key] });
  });

  Object.keys(devDependencies).forEach((key) => {
    devSchema.push({ field: key, label: devDependencies[key] });
  });
</script> -->

<style lang="less" scoped></style>
